.labels{
font-size: 20px;
font-style: italic;	
}
@keyframes fadein {
  from {
	  
    opacity: 0;
		                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
  }
  to {
	 
	  pacity: 1;
	
  }
}



html{
Zoom: 100%;
background-color: black;
overflow: hidden;

}
body{
	
}


#freeText{
position: absolute;
top: 40px;
left:1165px;
width: 250px;
height: 40px;
border-radius: 25px;
border: solid;
border-color: #0A98C1;
color: grey;
font-size: 20px;
border-spacing:10px;
background-color: black;
z-index: 0;
padding-left: 15px;
outline: none;
text-align: left;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: grey;
  font-size: 20px;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: grey;
  font-size: 20px;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: grey;
  font-size: 20px;
}
#contain_menu{
	border: solid;
	height: 40px;
	border-color: white;
	border-left:none;
    border-right:none;
	width: 100%;
	border-width: 0.2px;
	overflow: visible;

}
#itemlocator{
position: relative;
left: 45 px;
}
.fssi{
position: relative;
top: 70px;
z-index: 0;	 
}
#FSS{
position: reletive;
z-index: 0;
top: 100px;
left: 30px;

}
#SubmitB{
position: absolute;
top: 260px;
left: 500px;
z-index: 0;

background-size: contain; 
font-size: 30px;
background-repeat: no-repeat;
width: 126px;
height: 70px;
}
#ftl{
position: absolute;
top: 300px;	
z-index: 0;
}
#RootSelector{
	
}
#shrpim{
position: absolute;
height:35px;
left: 95px;
top:190px;	
}
#fltsim{
position: absolute;
height:35px;
border: solid rgb(10, 152, 193);
left:95px;
top:240px;	
}
.titleoflist{


display: inline-block;
width: 200px;
font-family: "Segoe UI";

color: white;
position: absolute;
top: float;
cursor:pointer; 
font-size:30px;
height: 35px;
margin-right: 2px;

}

#testli{
display: inline-block;	
}

.itemcon{
font-size : 12px;
display: block;
position: absolute;
top: 42px;	
z-index: 6;
display: none;




}

.itemcon2 {
font-size : 12px;
display: block;
position: absolute;
top: 42px;	
z-index: 0;
display: none;



}
.itemcon3{
font-size : 12px;
display: block;
position: absolute;
display: none;	

z-index: 5;


}
.itemcon4{
font-size : 12px;
display: block;
position: absolute;
display: none;	

z-index: 5;


}
.item{
	font-size : 15px;
	font-family: "Segoe UI";
	width: 50px;
border: solid;
background: white;
color: black ;
border-color:#E8E8E8;
position: absolute;
top: float;
display: none;
cursor:pointer;
height: 25px;
width: 160px; 
z-index: 6;
}

.item2{
	font-size : 15px;
	font-family: "Segoe UI";
	width: 50px;
	height: 25px;
border: solid;
background: white;
color: black ;
border-color:#E8E8E8;
position: absolute;
top: float;
left: 160px;
display: none;
cursor:pointer;
width: 160px; 
z-index: 5;
}
input.fssi{
	width:50px;
	height:50px;
}

.itemn{
	width: 50px;
	height: 25px;
border: solid;
background: white;
color: black ;
border-color:#E8E8E8;
position: absolute;
top: float;
display: inline-block;
cursor:pointer;
z-index: 3;
width: 160px;  
}
.flats{
position: absolute;
top: 40px;	
font-size : 12px;
z-index: 3;
}
.sharps{
font-size : 12px;
position: absolute;
top: 40px;
z-index: 3;	
}
.item:hover{
border-color: purple;
}
.item2:hover{
border-color: purple;
}
.itemn:hover{
border-color: purple;
}


.titleoflist:hover{
border-color: red;
	
}
#Rootdivor:hover .item {
display: inline-block;	
z-index: 5;

}
#Triads:hover .item {
	
display: inline-block;
z-index: 5;	
}
#sixchords:hover .item {
	display: inline-block;
	z-index: 5;
	
}
#seventhchords:hover .item {
	
z-index: 5;
display: inline-block;
	
}
#ninthchords:hover .item {
	
z-index: 5;
display: inline-block;
	
}
#elevens:hover .item {
	
z-index: 5;
display: inline-block;
	
}

#elevens:hover .item2 {
	
z-index: 5;
display: inline-block;

	
}

#thirts:hover .item {
	
z-index: 5;
display: inline-block;
	
}
#thirts:hover .item2 {
	
z-index: 5;
display: inline-block;
	
}
#Rootdivor:hover .itemcon {
display: inline-block;	
z-index: 5;
}
#Triads:hover .itemcon {
	
display: inline-block;
z-index: 5;	
}
#sixchords:hover .itemcon {
	display: inline-block;
	z-index: 5;
	
}
#seventhchords:hover .itemcon {
	
z-index: 5;
display: inline-block;
	
}
#ninthchords:hover .itemcon {
	
z-index: 5;
display: inline-block;
	
}
#elevens:hover .itemcon {
	
z-index: 5;
display: inline-block;
	
}

#elevens:hover .itemcon2 {
	
z-index: 5;
display: inline-block;

	
}

#thirts:hover .itemcon {
	
z-index: 5;
display: inline-block;
	
}
#thirts:hover .itemcon2 {
	
z-index: 5;
display: inline-block;
	
}
#Rootdivor{
animation: fadein 0.5s;		
position: absolute;	
display: inline-block;
left: 82px;
z-index: 3;
width : 70px;
overflow: visible;


}
#Triads{
animation: fadein 1s;	
position: absolute;	
display: inline;
left: 327px;
z-index: 5;
width : 70px;
overflow: visible;
}
#sixchords{
animation: fadein 1.5s;	
position: absolute;	
display: inline-block;
left: 505px;
z-index: 5;	
width : 70px;
overflow: visible;	
}
#seventhchords{
animation: fadein 2s;		
position: absolute;	
display: inline-block;
left: 717px;
z-index: 5;
width : 70px;
overflow: visible;
	
}
#ninthchords{
animation: fadein 2.5s;	
position: absolute;	
display: inline-block;
left: 939px;
z-index: 5;
width : 70px;
height: 30px;	
overflow: visible;
}
#ninthchords:hover .itemcon2{

position: relative;	
top: 24px;
left: 165px;
display:block;
	
}
#elevens{
animation: fadein 3s;		
position: absolute;	
display: inline-block;
left: 1152px;
z-index: 3;
width : 70px;
height: 5px;
overflow: visible;
	
}

#elevens:hover .itemcon{
position: absolute;
left: -200px;
top: 42px;
display:block;
	
}
#elevens:hover .itemcon2{
position: absolute;
left: -195px;
top: 42px;
display:block;	
}
#elevens:hover .itemcon3{
position: absolute;
font-size : 12px;
left: -30px;
top: 42px;
display:block;	
}
#elevens:hover .itemcon4{
position: absolute;
font-size : 12px;
left: 133px;
top: 42px;
display:block;	
}
#thirts{
animation: fadein 3.5s;	
position: absolute;	
display: inline-block;
left: 1377px;
z-index: 3;
width : 70px;
overflow: visible;	
}
#thirts:hover .itemcon{
position: reletive;	
left: -100px;

	
}
#thirts:hover .itemcon2{
position: reletive;	
left: -100px;
	
}
.itemim{

width: 200px;
height: 70px;
display: none;	
}
.item:hover .itemim{
display: block;
position: relative;
z-index: 6;
left: 162px;
top: -5px;
}
itemcon:hover + .itemcon2{
display: none;
position: ;
z-index: 10;
left: 162px;
top: -100px;
}
#keys{
background-image: url("keys.png");
position: absolute;
height: 350px;
	width: 1600px;
	border: solid;
z-index:-1;
	
	
}
.sqrs{
	height: 350px;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	 
}

.notecir {
	 height: 35px;
  width: 35px;
  background-color: #B22222;
  border-radius: 50%;
  display: inline-block;
  visibility: hidden;
  z-index: 1;
   -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
 
  
}

.notesqr {
  height: 35px;
  width: 35px;
  background-color: #0a98c1;
  
  display: inline-block;
  z-index: 2;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
 
  
}


#C1_sqr {
position: relative;
top: -55px;
left: -2px;
clip-path: polygon(42% 0, 41% 61%, 59% 61%, 59% 100%, 0 100%, 0 0);
height: 350px;
width : 130px;	
opacity : 0;

}

#Db1_sqr {
position: relative;
top: -190px;
left: -82px;
width : 46px;
height: 215px;
opacity : 0;
}

#D1_sqr {
position: relative;
top: 250px;
left: 15px;	
top: -55px;
left: -132px;
height: 350px;
width : 130px;
clip-path: polygon(35% 0, 59% 0, 59% 61%, 78% 61%, 78% 100%, 18% 100%, 18% 61%, 35% 61%);
opacity : 0;
}
#Eb1_sqr {
position: relative;
top: 15px;
left: 15px;
top: -190px;
left: -190px;
width : 46px;
height: 215px;
opacity : 0;
}

#E1_sqr {
position: relative;
top: -55px;
left: -270px;
height: 350px;
width : 130px;	
clip-path: polygon(58% 0, 100% 0, 100% 60%, 100% 100%, 40% 100%, 39% 61%, 59% 61%);
opacity : 0;
}

#F1_sqr {
position: relative;
top: -55px;
left: -276px;
clip-path: polygon(42% 0, 41% 61%, 59% 61%, 59% 100%, 0 100%, 0 0);
height: 350px;
width : 130px;	
opacity : 0;	
}

#Gb1_sqr {
position: relative;
top: 15px;
left: 15px;
top: -190px;
left: -357px;
width : 46px;
height: 215px;
opacity : 0;	
}
#G1_sqr {
position: relative;
top: 250px;
left: 15px;	
top: -55px;
left: -407px;
height: 350px;
width : 130px;
clip-path: polygon(35% 0, 59% 0, 59% 61%, 78% 61%, 78% 100%, 18% 100%, 18% 61%, 35% 61%);
opacity : 0;		
}
#Ab1_sqr {
position: relative;
top: 15px;
left: 15px;
top: -190px;
left: -464px;
width : 46px;
height: 215px;
opacity : 0;	
}
#A1_sqr {
position: relative;
top: 250px;
left: 15px;	
top: -55px;
left: -515px;
height: 350px;
width : 130px;
clip-path: polygon(35% 0, 59% 0, 59% 61%, 78% 61%, 78% 100%, 18% 100%, 18% 61%, 35% 61%);
opacity : 0;		
}
#Bb1_sqr {
position: relative;
top: 15px;
left: 15px;
top: -190px;
left: -572px;
width : 46px;
height: 215px;
opacity : 0;
}
#B1_sqr {
position: relative;
top: -55px;
left: -650px;
height: 350px;
width : 130px;	
clip-path: polygon(57% 0, 100% 0, 100% 60%, 100% 100%, 40% 100%, 39% 61%, 57% 61%);
opacity : 0;	
}
#C2_sqr {
position: relative;
top: -55px;
left: -657px;
clip-path: polygon(42% 0, 41% 61%, 59% 61%, 59% 100%, 0 100%, 0 0);
height: 350px;
width : 130px;	
opacity : 0;	
}

#Db2_sqr {
position: relative;
top: 15px;
left: 15px;
top: -190px;
left: -737px;
width : 46px;
height: 215px;
opacity : 0;	

}

#D2_sqr {
position: relative;
top: 250px;
left: 15px;	
top: -55px;
left: -788px;
height: 350px;
width : 130px;
clip-path: polygon(35% 0, 59% 0, 59% 61%, 78% 61%, 78% 100%, 18% 100%, 18% 61%, 35% 61%);	
opacity : 0;	
}
#Eb2_sqr {
position: relative;

top: -190px;
left: -846px;
width : 46px;
height: 215px;
opacity : 0;	
}

#E2_sqr {
position: relative;
top: -409px;
left: 633px;
height: 350px;
width : 130px;	
clip-path: polygon(57% 0, 100% 0, 100% 60%, 100% 100%, 40% 100%, 39% 61%, 57% 61%);
opacity : 0;
		
}

#F2_sqr {
position: relative;
top: -409px;
left: 626px;
clip-path: polygon(42% 0, 41% 61%, 59% 61%, 59% 100%, 0 100%, 0 0);
height: 350px;
width : 130px;
opacity : 0;			
}

#Gb2_sqr {
position: relative;
top: -545px;
left: 544px;
width : 46px;
height: 215px;
opacity : 0;	
}
#G2_sqr {
position: relative;
top: -409px;
left: 495px;
height: 350px;
width : 130px;
clip-path: polygon(35% 0, 59% 0, 59% 61%, 78% 61%, 78% 100%, 18% 100%, 18% 61%, 35% 61%);
opacity : 0;
		
}
#Ab2_sqr {
position: relative;
top: -545px;
left: 436px;
width : 46px;
height: 215px;
opacity : 0;

}
#A2_sqr {
position: relative;
top: -409px;
left: 387px;
height: 350px;
width : 130px;
clip-path: polygon(35% 0, 59% 0, 59% 61%, 78% 61%, 78% 100%, 18% 100%, 18% 61%, 35% 61%);
opacity : 0;	
}
#Bb2_sqr {
position: relative;
top: -545px;
left: 327px;
width : 46px;
height: 215px;
opacity : 0;	

}
#B2_sqr {
position: relative;
top: -409px;
left: 250px;
height: 350px;
width : 130px;	
clip-path: polygon(57% 0, 100% 0, 100% 60%, 100% 100%, 40% 100%, 39% 61%, 57% 61%);
opacity : 0;
}
#C3_sqr {
position: relative;
top: -409px;
left: 243px;
clip-path: polygon(42% 0, 41% 61%, 59% 61%, 59% 100%, 0 100%, 0 0);
height: 350px;
width : 130px;	
opacity : 0;
}

#Db3_sqr {
position: relative;
top: -545px;
left: 163px;
width : 46px;
height: 215px;
opacity : 0;	
}

#D3_sqr {
position: relative;
top: -409px;
left: 111px;
height: 350px;
width : 130px;
clip-path: polygon(35% 0, 59% 0, 59% 61%, 78% 61%, 78% 100%, 18% 100%, 18% 61%, 35% 61%);
opacity : 0;		
}
#Eb3_sqr {
position: relative;
top: -545px;
left: 55px;
width : 46px;
height: 215px;
opacity : 0;	

}

#E3_sqr {
position: relative;
top: -409px;
left:-25px;
height: 350px;
width : 130px;	
clip-path: polygon(57% 0, 100% 0, 100% 60%, 100% 100%, 40% 100%, 39% 61%, 57% 61%);
opacity : 0;		
}

#F3_sqr {
position: relative;
top: -409px;
left: -33px;
clip-path: polygon(42% 0, 41% 61%, 59% 61%, 59% 100%, 0 100%, 0 0);
height: 350px;
width : 130px;	
opacity : 0;	
}

#Gb3_sqr {
position: relative;
top: -545px;
left: -112px;
width : 46px;
height: 215px;
opacity : 0;	
}
#G3_sqr {
position: relative;
top: -763px;
left: 1342px;
height: 350px;
width : 130px;
clip-path: polygon(35% 0, 59% 0, 59% 61%, 78% 61%, 78% 100%, 18% 100%, 18% 61%, 35% 61%);
opacity : 0;		
}
#Ab3_sqr {
position: relative;
top: -899px;
left: 1286px;
width : 46px;
height: 215px;
opacity : 0;
}
#A3_sqr {
position: relative;
top: -763px;
left: 1237px;
height: 350px;
width : 130px;
clip-path: polygon(35% 0, 59% 0, 59% 61%, 78% 61%, 78% 100%, 18% 100%, 18% 61%, 35% 61%);
opacity : 0;		
}
#Bb3_sqr {
position: relative;
top: -899px;
left: 1178px;
width : 46px;
height: 215px;
opacity : 0;
}
#B3_sqr {
position: relative;
top: -763px;
left: 1100px;
height: 350px;
width : 130px;	
clip-path: polygon(57% 0, 100% 0, 100% 60%, 100% 100%, 40% 100%, 39% 61%, 57% 61%);
opacity : 0;		
			
}

#C1 {
position: relative;
top: 250px;
left: 15px;	

}

#Db1 {
position: relative;
top: 100px;
left: 15px;
}

#D1 {
position: relative;
top: 250px;
left: 15px;		
}
#Eb1 {
position: relative;
top: 100px;
left: 15px;
}

#E1 {
position: relative;
top: 250px;
left: 15px;		
}

#F1 {
position: relative;
top: 250px;
left: 50px;		
}

#Gb1 {
position: relative;
top: 100px;
left: 50px;
}
#G1 {
position: relative;
top: 250px;
left: 50px;		
}
#Ab1 {
position: relative;
top: 100px;
left: 50px;
}
#A1 {
position: relative;
top: 250px;
left: 50px;		
}
#Bb1 {
position: relative;
top: 100px;
left: 50px;
}
#B1 {
position: relative;
top: 250px;
left: 50px;		
}
#C2 {
position: relative;
top: 250px;
left: 75px;	

}

#Db2 {
position: relative;
top: 100px;
left: 80px;	
}

#D2 {
position: relative;
top: 250px;
left: 75px;			
}
#Eb2 {
position: relative;
top: 100px;
left: 80px;	
}

#E2 {
position: relative;
top: 250px;
left: 75px;			
}

#F2 {
position: relative;
top: 250px;
left: 110px;		
}

#Gb2 {
position: relative;
top: 100px;
left: 115px;
}
#G2 {
position: relative;
top: 250px;
left: 110px;		
}
#Ab2 {
position: relative;
top: 100px;
left: 115px;
}
#A2 {
position: relative;
top: 250px;
left: 115px;		
}
#Bb2 {
position: relative;
top: 100px;
left: 110px;
}
#B2 {
position: relative;
top: 250px;
left: 110px;	
}
#C3 {
position: relative;
top: 250px;
left: 135px;	

}

#Db3 {
position: relative;
top: 100px;
left: 140px;
}

#D3 {
position: relative;
top: 250px;
left: 135px;		
}
#Eb3 {
position: relative;
top: 100px;
left: 140px;
}

#E3 {
position: relative;
top: 250px;
left: 135px;		
}

#F3 {
position: relative;
top: 250px;
left: 170px;		
}

#Gb3 {
position: relative;
top: 100px;
left: 175px;
}
#G3 {
position: relative;
top: 250px;
left: 170px;		
}
#Ab3 {
position: relative;
top: 100px;
left: 175px;
}
#A3 {
position: relative;
top: 250px;
left: 170px;		
}
#Bb3 {
position: relative;
top: 100px;
left: 175px;
}
#B3 {
position: relative;
top: 250px;
left: 170px;		
}

#Panel{
position: reletive;
top: 600px;
height: 200px;
width: 1600px;
color: white;
overflow: visible;


}
#chordq{
font-family: "Segoe UI";
border: solid;
border-color: #0A98C1;
font-size: 65px;
display: inline-block;
position: fixed;
left: 50%;
transform: translate(-50%, -50%);
overflow: auto;
z-index: 3;

}
#contain_chord{
	position: absolute;
	z-index: 3;
	width: 100%;
	text-align:center;
	display: flex;
	 display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  
  justify-content: center;
  align-items: center;
}
#altcon{
border: solid;
border-color: #0A98C1;
background-color: black;
font-size: 30px;
display: inline-block;
opacity: 0;
position: absolute;
left: 850px;
top: 260px;
z-index: 3;
}

#awsomelogo{
position: absolute;
top: -10px;
width: 100%;
}
.invert{
font-size: 30px;
position: absolute;
width: 95px;
height: 52.5px;
background-size: contain;
left: 1265px;	
}
.trans{
position: absolute;
background-size: contain;	
}
#transUp{
font-size: 30px;
width: 95px;
height: 52.5px;
background-image: url('/static/btn/trab.png');
left: 1350px;	
top: 190px;
}
#transDown{
font-size: 30px;
position: absolute;
width: 95px;
height: 52.5px;
top:50px;
background-image: url('/static/btn/trab2.png');
left: 1350px;	
top: 235px;
}
#transUp:hover{
background-image: url('/static/btn/tra.png');	
}
#transDown:hover{
background-image: url('/static/btn/tra2.png');	
}
.drops{
font-size: 30px;
position: absolute;
width: 95px;
height: 52.5px;
background-size: contain;
left: 1435px;	
}
#play_c{
font-size: 30px;
position: absolute;
width: 95px;
height: 52.5px;
background-size: contain;
top: 215px;
left: 2550px;	
background-image: url('/static/btn/sound.png');
}
#invUP{
background-image: url('/static/btn/invert up.png');

top: 189px;
}
#invDWN{
background-image: url('/static/btn/invert down.png');
background-size: contain;
position: reletive;
top: 235px;
}
#drop2{
background-image: url('/static/btn/drop2.png');
background-size: contain;
top: 189px;
}
#drop3{
background-image: url('/static/btn/drop3.png');
background-size: contain;
position: reletive;
top: 235px;
}
#invDWN:hover{
background-image: url('/static/btn/invert down hover.png');
}
#invUP:hover{
background-image: url('/static/btn/invert up hover.png');
}
#drop2:hover{
background-image: url('/static/btn/drop2 hover.png');
}
#drop3:hover{
background-image: url('/static/btn/drop3 hover.png');
}
#play_c:hover{
background-image: url('/static/btn/sound hover.png');
}
.contAll{
	overflow:visible;
}
.buttons{
	position: absolute;
	left: -1120px;
	top:0px;
}